<template>
  <div>
    <div
      class="banner-box flex-center bg-[url('~/assets/images/product/zxb_banner.png')] bg-cover bg-no-repeat"
    >
      <div class="banner-con">
        <h1 class="banner-main-title !text-[#FF645D]">筑训宝·劳务学习平台</h1>
        <p
          class="banner-text text-[#FF645D] xl:w-[35vw] mt-10 "
        >
          由劳动监察大队主管，为从业者提供劳务知识系统学习和备考一站式服务平台，深入学习项目劳动报酬和人力资源管理等知识，推动劳资专员持续学习和考取专业资格证，提升从业者专业知识素养，打造纵向到底、横向到边的劳务学习平台。
        </p>
      </div>
    </div>

    <div class="pt-[88px] pb-20 bg-[#FBFBFB]">
      <div class="w-[96%] xl:w-[1200px] mx-auto">
        <h2 class="module-title">平台特点</h2>
        <div class="flex flex-wrap mt-10 justify-center md:space-x-4">
          <div
            v-for="(item, ind) in traitList"
            :key="item.name"
            class="w-[227px] h-[318px] bg-white mb-6 px-7 pt-12 relative text-center rounded-sm border border-[#EDF4FB] border-t-2 border-t-[#FF8000]"
          >
            <img
              class="inline-block"
              :src="require(`../../assets/images/product/zxb_0${ind + 1}.png`)"
            />
            <div class="text-[#222] mt-[15px]">{{ item.name }}</div>
            <p class="mt-[18px] text-left text-[#828282] text-sm xl:leading-6">
              {{ item.content }}
            </p>
          </div>
        </div>
      </div>
    </div>

    <div
      class="py-20 bg-[url('~/assets/images/product/zxb_intro_banner.png')] bg-image-base"
    >
      <div class="w-[96%] xl:w-[1200px] mx-auto">
        <h2
          class="hidden md:block md:text-6xl bg-gradient-to-t from-[#F8FCFF] to-[#FFF0EB] uppercase bg-clip-text text-fill-color"
        >
          Labor service learning platform
        </h2>
        <h3 class="text-[#FF645D] font-extrabold md:text-2xl">
          劳务学习平台PC端
        </h3>
        <div class="flex mt-3 items-center justify-between">
          <img
            class="w-[29.3%]"
            src="../../assets/images/product/zxb_pc_01.png"
          />
          <img
            alt="筑训宝·劳务学习平台"
            class="w-[35%]"
            src="../../assets/images/product/zxb_pc_02.png"
          />
          <img
            class="w-[29.3%]"
            src="../../assets/images/product/zxb_pc_03.png"
          />
        </div>
        <h3 class="text-[#FF645D] my-7 md:my-14 font-extrabold md:text-2xl">
          劳务学习平台小程序
        </h3>
        <div class="flex mt-3 items-center justify-between">
          <img
            class="w-[23.6%]"
            src="../../assets/images/product/zxb_phone_01.png"
          />
          <img
            class="w-[23.6%]"
            src="../../assets/images/product/zxb_phone_02.png"
          />
          <img
            class="w-[23.6%]"
            src="../../assets/images/product/zxb_phone_03.png"
          />
          <img
            class="w-[23.6%]"
            src="../../assets/images/product/zxb_phone_04.png"
          />
        </div>
      </div>
    </div>

    <div class="pt-[88px] pb-20 bg-[#FBFBFB]">
      <div class="w-[96%] xl:w-[1200px] mx-auto">
        <h2 class="module-title">平台价值</h2>
        <div class="flex flex-wrap mt-10 justify-center md:space-x-5">
          <div
            v-for="(item, ind) in valueList"
            :key="ind"
            class="w-[285px] h-[313px] bg-white mb-6 flex-center flex-col rounded-sm border border-[#EDF4FB] border-t-2 border-t-[#FF7700]"
          >
            <img
              class="inline-block"
              :src="
                require(`../../assets/images/product/zxb_value_0${ind + 1}.png`)
              "
            />
            <div class="text-[#222] mt-[15px]">{{ item }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      traitList: [
        {
          name: '海量题库',
          content:
            '劳务监察人员可自行创建考题和批量导入题库，同时对错题进行统计和管理。',
        },
        {
          name: '资讯丰富',
          content:
            '包含法律法规、政策以及领导讲话等图文、音视频学习资料，学习计划与目标可自由设定。',
        },
        {
          name: '多端展现',
          content:
            '主要包含劳动监察人员PC端和移动端，以及劳资专管员移动端，实用便捷。',
        },
        {
          name: '数据统计',
          content:
            '劳务监察端可对每个项目工地，每个学员具体学习情况进行展示、统计、分析。',
        },
        {
          name: '消息管理',
          content:
            '主要包含考试通知、学习计划、学习提醒、重要文件精神传达以及证件有效期提醒等。',
        },
      ],
      valueList: ['系统组织', '权威管理', '专业指导', '优质服务'],
    }
  },
  head: {
    title: '筑训宝·劳务学习平台-联合智为',
    meta: [
      {
        hid: 'index-keywords',
        name: 'keywords',
        content: '筑训宝·劳务学习平台',
      },
      {
        hid: 'index-desc',
        name: 'description',
        content:
          '由劳动监察大队主管，为从业者提供劳务知识系统学习和备考一站式服务平台，深入学习项目劳动报酬和人力资源管理等知识，推动劳资专员持续学习和考取专业资格证，提升从业者专业知识素养，打造纵向到底、横向到边的劳务学习平台。',
      },
    ],
  },
}
</script>

<style scoped>
</style>
